<!--@deprecated 不再使用-->
<template>
  <main-content title="新增商品" back>
    <main-content-actions-wrapper>
      <el-button @click="cancel">取消</el-button>
      <el-button @click="save" type="primary">保存</el-button>
    </main-content-actions-wrapper>

    <el-form ref="addGoods" v-model="addGoodsForm">
      <el-form-item prop="status" label="商品状态">
        <el-switch v-model="goodsStatus" active-text="开启" inactive-text="关闭" />
      </el-form-item>
      <el-form-item label="选择商品">
        <el-button type="primary" @click="showSelectGoods">选择商品</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="waitingAddList">
      <template #empty>
        请点击“选择商品”按钮 选择商品
      </template>
      <el-table-column prop="img" label="商品图片" min-width="120">
        <template #default="scope">
          <el-image :src="scope.row.img" style="display: block"></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="productName" label="商品名称"  min-width="200"></el-table-column>
      <el-table-column prop="name" label="商品分类" min-width="150">
        <template #header>
          <span class="highlight">*</span>商品分类
        </template>
        <template #default="scope">
          <el-select v-model="scope.row.mallProductCategory">
            <el-option v-for="item in goodsCateList" :label="item.name" :value="item.id" :key="item.id"></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="currentStock" label="剩余库存" min-width="120"></el-table-column>
      <el-table-column prop="amount" min-width="150">
        <template #header>
          <span class="highlight">*</span>兑换库存
        </template>
        <template #default="scope">
          <el-input v-model="scope.row.amount"  type="number"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="productLimit" min-width="150">
        <template #header>
          <span class="highlight">*</span>兑换限制（件/人）
        </template>
        <template #default="scope">
          <el-input v-model="scope.row.productLimit" type="number" max="99999999" oninput="if(value>99999999){value=99999999}"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="costPrice" min-width="150">
        <template #header>
          <span class="highlight">*</span>兑换价
        </template>
        <template #default="scope">
          <el-input v-model="scope.row.costPrice" type="number">
            <template #append>
              积分
            </template>
          </el-input>
        </template>
      </el-table-column>
      <el-table-column prop="sort" label="排序" min-width="120">
        <template #default="scope">
          <el-input v-model="scope.row.sort" type="number"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="操作" fixed="right">
        <template #default="scope">
          <el-button type="primary" link @click="deleteRow(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-row justify="end" style="margin-top: 20px;margin-bottom: 20px">
        <el-pagination
          v-model:current-page="pageInfo.currentPage"
          v-model:page-size="pageInfo.showCount"
          :total="pageInfo.totalResult">
        </el-pagination>
    </el-row>

    <select-goods v-model:show="isShowSelectGoods" @confirm="handleSelectConfirm"></select-goods>
  </main-content>
</template>

<script setup lang="ts">
/**
 * @deprecated 需求变更。废弃。
 */
import {Ref} from "vue";
import SelectGoods from './components/SelectGoods.vue';
import {IStoreGoodsPageRow} from "@/api/modules/pointsMall";
import {useGetGoodsCategory} from "@/views/pointsMall/compositions/useGetGoodsCategory";
import {ElMessageBox} from "element-plus";
import {addProducts} from "@/api/pointsMall";

const store = useStore()
const router = useRouter()

const addGoodsForm = reactive<{
  status: 1 | 0
}>({
  status: 0
})
const goodsStatus = ref(false)
watch(goodsStatus, (newValue) => {
  addGoodsForm.status = newValue ? 1 : 0
})
const pageInfo = reactive({
  currentPage: 1,
  showCount: 10,
  totalResult: 0,
})

const waitingAddList = ref<IStoreGoodsPageRow[]>(store.state.addGoods.waitingAddList)
const { goodsCateList } = useGetGoodsCategory()

const isShowSelectGoods = ref(false)
const showSelectGoods = () => {
  store.commit('addGoods/recoverSelected', waitingAddList.value)
  isShowSelectGoods.value = true
}
const handleSelectConfirm = (selectedList: IStoreGoodsPageRow[]) => {
  store.commit('addGoods/mergeSelectedToWaitingAddList', selectedList)
  store.commit('addGoods/removeSelected')
}

const deleteRow = (row: IStoreGoodsPageRow) => {
  ElMessageBox
      .confirm('确认删除？', '提示')
      .then(() => {
        store.commit('addGoods/deleteWaitingAddRow', row)
      })
}

const checkSave: () => {result: boolean, message: string} = () => {
  const createMessage = (result = false, message = '') => {
    return {result, message}
  }

  const isNullUndefinedOrEmpty = (val: any) => {
    return val === null || val === undefined || val === ''
  }

  for (let i=0; i<waitingAddList.value.length; i++) {
    const row = waitingAddList.value[i]

    if (isNullUndefinedOrEmpty(row.mallProductCategory) || row.mallProductCategory === -1) {
      return createMessage(false, `${row.productName}未设置商品分类`)
    }

    if (isNullUndefinedOrEmpty(row.amount)) {
      return createMessage(false, `${row.productName}未填写兑换库存`)
    }

    if (Number(row.amount) > row.currentStock) {
      return createMessage(false, `${row.productName}可兑换库存 不能 大于 剩余库存`)
    }

    if (isNullUndefinedOrEmpty(row.productLimit)) {
      return createMessage(false, `${row.productName}未填写兑换限制`)
    }
  }

  return createMessage(true)
}

const cancel = () => {
  store.commit('addGoods/removeWaitingAddList')
  store.commit('addGoods/removeSelected')
  router.back()
}

const save = async () => {
  const check = checkSave()
  if (!check.result) {
    ElMessage.warning(check.message)
    return
  }
  waitingAddList.value.forEach(item => {
    item.status = addGoodsForm.status
  })

  const rs = await addProducts({
    productEntities: waitingAddList.value
  })

  if (rs.code === 200) {
    ElMessage.success('新增成功')
    cancel()
  }
}


const test = () => {
  console.log(store.state.addGoods)
}

</script>

<style scoped lang="scss">

.card-options {
  display: flex;
  align-items: center;

  .card-option {
    width: 150px;
    height: 75px;
    position: relative;
    border: solid 1px var(--el-color-primary);
    margin-right: 10px;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 4px;
    cursor: pointer;

    .check-icon-wrapper {
      width: 20px;
      height: 20px;
      background: var(--el-color-primary);
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      position: absolute;
      right: 5px;
      bottom: 5px;
    }
  }
}

.highlight {
  color: var(--el-color-error)
}
</style>
